<template>
  <div class="toggleText">
    <FormPanel :list="topFilterList" :cols="2" :collapse="false" :isSubmitBtn="false" />
    <FormPanel :list="formList" :cols="3" :isSubmitBtn="false" :collapse="false" :labelWidth="110" />
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';

export default {
  mixins: [dictionary],
  props: ['remindSourcePath', 'data'],
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      formList: this.createdFrom(),
      defaultBtn: true
    };
  },
  computed: {
    remindContent() {
      return this.topFilterList[0].initialValue;
    },
    customerFeedback() {
      return this.topFilterList[1].initialValue;
    },
    formList3() {
      return this.formList;
    }
  },
  mounted() {
    // console.log(this.remindSourcePath, 'remindSourcePath');
    this.defaultSatus();

    this.initForm2();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'TEXT_AREA',
          label: '提醒内容',
          fieldName: 'remindContent',
          selfCols: 2,
          rows: 4,
          maxlength: 100,
          rules: [{ required: true, message: '请输入提醒内容', trigger: 'blur' }]
        },
        {
          type: 'TEXT_AREA',
          label: '客户反馈',
          fieldName: 'customerFeedback',
          selfCols: 2,
          rows: 4,
          maxlength: 100
        }
      ];
    },
    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '备注',
          fieldName: 'remark',
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '提醒状态',
          fieldName: 'remindStatus',
          initialValue: '',
          itemList: this.createDictList('8057'),
          rules: [{ required: true, message: '这是必填字段', trigger: 'blur' }],
          change: val => {
            this.selectChange(val);
          }
        },
        {
          type: 'SELECT',
          label: '失败原因',
          fieldName: 'remindFailReason',
          initialValue: '',
          itemList: this.createDictList('8069')
        },
        {
          type: 'DATE',
          label: '下次提醒日期',
          fieldName: 'nextRemindDate',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'SELECT',
          label: '提醒方式',
          fieldName: 'remindWay',
          initialValue: '',
          itemList: this.createDictList('8081')
        },
        {
          type: 'INPUT_NUMBER',
          label: '保险到期月',
          min: 1,
          max: 12,
          fieldName: 'expiredMonth'
        },
        {
          type: 'INPUT_NUMBER',
          label: '保险到期日',
          min: 1,
          max: 31,
          fieldName: 'expiredDay'
        },
        {
          type: 'INPUT',
          label: '意向保险公司',
          fieldName: 'intentInsurance',
          initialValue: ''
        }
      ];
    },
    // 把返回的数据赋值给表单
    syncFormListData(dataList) {
      const formList = [...this.topFilterList];
      const formList1 = [...this.formList];
      const formFieldNames = formList.map(x => x.fieldName);
      const formFieldNames1 = formList1.map(x => x.fieldName);
      dataList.forEach(x => {
        if (formFieldNames.includes(x.fieldName) && x.fieldName !== 'remindContent' && x.fieldName !== 'customerFeedback') {
          let target = formList.find(k => k.fieldName == x.fieldName);
          if (!target) return;
          target.initialValue = x.value;
        }
        // if (formFieldNames1.includes(x.fieldName)) {
        //   let target = formList1.find(k => k.fieldName == x.fieldName);
        //   if (!target) return;
        //   target.initialValue = x.value;
        // }
      });
      let remindStatus = this.formList.find(item => item.fieldName === 'remindStatus').initialValue;
      this.selectChange(remindStatus);
    },
    initForm2() {
      let newStr = [];
      for (let [key, val] of Object.entries(this.data)) {
        let param = {
          fieldName: key,
          value: val
        };
        newStr.push(param);
      }
      this.syncFormListData(newStr);
    },
    // 页面管控
    defaultSatus() {
      if (this.remindSourcePath === '1') {
        this.defaultBtn = false;
      } else {
        this.defaultBtn = true;
      }
      this.formList.find(x => x.fieldName === 'expiredMonth').disabled = this.defaultBtn;
      this.formList.find(x => x.fieldName === 'expiredDay').disabled = this.defaultBtn;
      this.formList.find(x => x.fieldName === 'intentInsurance').disabled = this.defaultBtn;
      this.formList = [...this.formList];
    },

    // 提醒状态下拉框change事件
    selectChange(val) {
      this.formList.find(x => x.fieldName === 'remindFailReason').disabled = true;
      this.formList.find(x => x.fieldName === 'nextRemindDate').disabled = true;
      if (val === 80571001) {
        this.formList.find(x => x.fieldName === 'remindFailReason').rules = [];
        this.formList.find(x => x.fieldName === 'nextRemindDate').rules = [{ required: true, message: '这是必填字段', trigger: 'blur' }];
        this.formList.find(x => x.fieldName === 'nextRemindDate').disabled = false;
      } else if (val === 80571002) {
        this.formList.find(x => x.fieldName === 'nextRemindDate').rules = [];
        this.formList.find(x => x.fieldName === 'remindFailReason').rules = [{ required: true, message: '这是必填字段', trigger: 'blur' }];
        this.formList.find(x => x.fieldName === 'remindFailReason').disabled = false;
      } else {
        this.formList.find(x => x.fieldName === 'remindFailReason').rules = [];
        this.formList.find(x => x.fieldName === 'nextRemindDate').rules = [];
      }
      this.formList = [...this.formList];
    },

    changeHandle1() {},
    changeHandle2() {}
  }
};
</script>
<style lang="less" scoped>
.toggleText {
  width: 100%;
  margin-bottom: 10px;
  .left {
    float: left;
    width: 60%;
    .detail_main {
      border: 1px solid #ebeef5;
      margin-bottom: 10px;
      .detail_top {
        background: #f2f2f2;
        border-bottom: 1px solid #ebeef5;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        padding-right: 10px;
      }
      .detail_containter {
        padding-top: 10px;
        border: 1px solid #ccc;
        height: 200px;
        margin: 2px;
      }
    }
  }
  .right {
    float: right;
    width: 40%;
    .detail_main {
      border: 1px solid #ebeef5;
      margin-bottom: 10px;
      .detail_top {
        background: #f2f2f2;
        border-bottom: 1px solid #ebeef5;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        padding-right: 10px;
      }
      .detail_containter {
        padding-top: 10px;
        margin: 2px;
        height: 200px;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
